import React, { useState, useEffect } from 'react';
import TabList from '../../components/TabList';
import PPTTemplate from '../../components/PPTTemplate';
import VideoTemplate from '../../components/VideoTemplate';
import WebPageTemplate from '../../components/WebPageTemplate';
import "./index.css";
import CustomerServiceChat from '../../components/CustomerServiceChat';
import axios from 'axios';
import './index.css'
function Draft() {
  // 当前图片索引
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  // 是否还有更多图片
  const [hasMore, setHasMore] = useState(true);
  // 当前页数
  const [page, setPage] = useState(1);
  // const [columns, setColumns] = useState(3); // 默认列数为 3
  // 获取图片数据的函数
  const fetchImages = async () => {
    try {
      setLoading(true);
      const response = await axios.get(`http://localhost:3000/api/images?page=${page}`);
      const data = response.data;
      if (data.length === 0) {
        setHasMore(false);
      } else {
        setImages((prevImages) => [...prevImages, ...data]);
      }

      setLoading(false);
    } catch (error) {
      console.error('Error fetching images:', error);
      setLoading(false);
    }
  };
  // 初次加载
  useEffect(() => {
    fetchImages();
  }, [page]);
  const [activeTab, setActiveTab] = useState(0);
  const [isChatOpen, setIsChatOpen] = useState(false);
  // Tab的内容
  const tabs = [
    {
      id: 0,
      title: "图片模板",
      content: [
        <div key={0}>
          <div>
            <TabList />
          </div>
        </div>,
      ],
    },
    {
      id: 1,
      title: "PPT模板",
      content: [
        <div key={0}>
          <div>
            <PPTTemplate />
          </div>
        </div>,
      ],
    },
    {
      id: 2,
      title: "视频模板",
      content: [
        <div key={0}>
          <div>
            <VideoTemplate />
          </div>
        </div>,
      ],
    },
    {
      id: 3,
      title: "H5网页模板",
      content: [
        <div key={0}>
          <div>
            <WebPageTemplate />
          </div>
        </div>,
      ],
    },
  ];
  const [data, setData] = useState([]);
  // 定义加载状态 
  const [loading, setLoading] = useState(false);
  // 获取数据的函数
  const fetchData = async () => {
    // 设置加载状态为 true
    setLoading(true);
    try {
      // 假设后端接口为 /api/list，接收 page 参数
      const response = await axios.get(`/api/list?page=${page}`);
      // 检查响应数据结构
      if (
        response.data &&
        response.data.data &&
        response.data.data.data &&
        Array.isArray(response.data.data.data)
      ) {
        const newData = response.data.data.data;
        // 如果没有更多数据，设置 hasMore 为 false
        if (newData.length === 0) {
          setHasMore(false);
        } else {
          // 否则，将新数据添加到 data 中，并更新 page
          setData((prevData) => [...prevData, ...newData]);
          setPage((prevPage) => prevPage + 1);
        }
      } else {
        console.error('Invalid response data structure');
        setHasMore(false);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      setHasMore(false);
    } finally {
      // 设置加载状态为 false
      setLoading(false);
    }
  };

  // 首次加载数据
  useEffect(() => {
    fetchData();
  }, []);

  // 监听滚动事件，使用防抖
  useEffect(() => {
    const handleScroll = () => {
      const scrollThreshold = 10;
      // 当滚动到页面底部，且没有正在加载，且有更多数据时，加载数据
      if (
        window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - scrollThreshold &&
        !loading &&
        hasMore
      ) {
        fetchData();
      }
    };
    // 使用防抖函数，设置防抖时间为 300ms
    const debouncedScroll = debounce(handleScroll, 300); // 300ms 防抖时间
    window.addEventListener('scroll', debouncedScroll);
    return () => window.removeEventListener('scroll', debouncedScroll);
  }, [loading, hasMore]);

  // 图片加载失败的处理函数
  const handleImageError = (e) => {
    e.target.src = 'https://via.placeholder.com/200'; // 替换为默认图片
  };

  // 防抖函数
  // 定义一个防抖函数，用于限制函数的执行频率
  const debounce = (func, delay) => {
    // 定义一个定时器变量
    let timer = null;
    // 返回一个函数，该函数接收任意数量的参数
    return (...args) => {
      // 如果定时器存在，则清除定时器
      if (timer) clearTimeout(timer);
      // 设置定时器，延迟执行传入的函数
      timer = setTimeout(() => {
        func(...args);
      }, delay);
    };
  };

  return (
    <div>
      {/* 左侧Tab栏 */}
      <div style={{ width: "350px", padding: "10px" }}>
        <ul style={{ listStyleType: "none", padding: 0, display: "flex" }}>
          {tabs.map((tab) => (
            <li
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              style={{
                padding: "10px",
                cursor: "pointer",
                backgroundColor: activeTab === tab.id ? "#ddd" : "transparent",
                marginBottom: "5px",
              }}
            >
              {tab.title}
            </li>
          ))}
        </ul>
      </div>
      {/* 右侧内容区 */}
      <div style={{ flexGrow: 1, padding: "10px" }}>
        <p>{tabs[activeTab].content}</p>
      </div>
      {/* 瀑布流 */}
      <div>

        <div
          style={{
            width: '100%',
            display: 'flex',
            flexWrap: 'wrap',
          }}
        >
          {data.map((item) => {
            // 生成 100 到 200 之间的随机高度
            const randomHeight = Math.floor(Math.random() * 101) + 100;
            return (
              <div
                key={item.id || item.shopImage} // 使用唯一标识作为 key
                style={{
                  width: '200px',
                  height: 'auto',
                  margin: '10px',
                  borderRadius: '5px',
                  overflow: 'hidden',
                }}
              >
                <img
                  src={item.shopImage}
                  alt=""
                  onError={handleImageError}
                  style={{ height: `${randomHeight}px`, width: '100%', objectFit: 'cover' }}
                />
              </div>
            );
          })}
        </div>
        {loading && <p>加载中...</p>}
        {!hasMore && <p>没有更多数据了</p>}
      </div>
      <div>
        <CustomerServiceChat isOpen={isChatOpen} onClose={() => setIsChatOpen(false)} />
      </div>
    </div>
  );
}
export default Draft;
